<template>
  <div class="container">
    <!-- 搜索样式展示 -->
    <div class="fixed-top">
      <div class="search-bar text-align-c">
        <div class="search flex-center v-align-c" @click="$pt.navigateTo({url: '/pages/personal/distribution/searchView/main'})">
          <van-icon name="search" color="#aeaeae" size="16px" class="mar-l-8 mar-r-4 mar-t-4"/>
          <div class="font-14">搜索商品名称</div>
        </div>
      </div>
      <div v-if="categoryLayer" class="category-layer" catchtouchmove="true">
        <div class="flex v-align-c layer-t pad-b-7 pad-t-5 pad-l-15 pad-r-15">
          <label class="font-19 font-w flex-item">全部分类</label>
          <img v-if="fileSpace" mode="widthFix"
            @click="categoryLayer = false"
            class="width-30 height-30 menu-btn" :src="fileSpace + '/images/menu-close.png'"/>
        </div>
        <ul>
          <li v-for="(item, index) in listCategory" :key="index" class="pos-rel"
            :class="activeIndex === index ? 'active' : ''" @click="menuClick(index)">
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="tabs-bar list-tabs pos-rel mar-t--5">
        <img v-if="fileSpace" mode="widthFix"
          @click="categoryLayer = true"
          class="width-30 height-30 menu-btn" :src="fileSpace + '/images/menu-open.png'"/>
        <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
          <div v-for="(item, index) in listCategory" :key="index">
            <van-tab :title="item.categoryName" title-style="font-size:32rpx;"></van-tab>
          </div>
        </van-tabs>
      </div>
    </div>
    <div class="height-87"></div>
    <div class="pos-rel">               
      <div class="main">
        <div class="main-bar pull-refresh">
          <div class="shop-bar pos-rel" v-for="(item, index) in listData" :key="index">
            <div class="img-item-box" @click="pageTo(item)">
              <img v-if="item.mainImage" :src="item.mainImage" mode="aspectFill" class="img-item"/>
            </div>
            <div class="content-item-box" @click="pageTo(item)">
              <div class="content-title line-2 mar-t--3">{{item.title}}</div>
              <div class="content-foot mar-t-20">                
                <div class="height-18">
                  <div v-if="item.distributeIncome && item.distributeIncome !== 0" class="self-buy mar-b-5">
                    <div class="self-buy-left">分销</div>
                    <div class="self-buy-right">赚<span style="color:#ffe200;">{{item.distributeIncome}}</span>元</div>
                  </div>
                </div>
                <div class="price-row">
                  <div class="price-box">
                    <span class='price'>¥{{ item.sellPrice }}</span>
                  </div>                  
                </div>
              </div>
            </div>
            <div class="flex v-align-c font-12 upper-btn upper-off" @click="upperGoods(item)">
              <icon class="iconfont icon-jiahao"></icon>
              <label>上架</label>
            </div>
          </div>
          <div class="nodata text-align-c" v-if="dataNone">
            <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
            <div class="align-c mar-t-20 font-16 font-color-6">
              暂无商品~
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--一键添加-->
    <div @click="upperGoodsAll" class="upper-all-btn box-shadow v-align-c">
      <div class="align-c width-per-100">
        <div>一键</div>
        <div>添加</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    pagingSellGoods,
    listOneProjectGoodsCategory,
    updateUpperShelfFlag,
    saveUpperShelfProjectGoodsTotal
  } from '@/api/distribution'
  export default {
    data() {
      return {
        activeIndex: 0,
        listCategory: [],
        categoryLayer: false,
        listData: [],
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        dataNone: false,
        categoryId: null,
        listQuery: {
          memberId: '',
          currentPage: '',
          size: 8,
          categoryId: '',
          keyword: '',
          recommendFlag: ''
        },
        pageLoad: true,
        sellStoreList: []
      }
    },
    onUnload() {
      this.$pt.removeStorageSync('fromUrl')
    },
    onShow() {
      let sellList = this.$pt.getStorageSync('sellList')
      if (sellList) {
        this.listData.forEach((item, index) => {
          sellList.forEach(itemSell => {
            if (item.goodsId === itemSell.goodsId) {
              this.listData.splice(index, 1)
            }
          })
        })
      }
      const reporter = this.getCurrentPage().page.__displayReporter.showReferpagepath
      if (this.pageLoad || reporter !== 'pages/shop/detail/main.html') {
        this.$pt.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
        this.activeIndex = 0
        this.listData = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listOneProjectGoodsCategory()
      }
    },
    mounted() {
    },
    onReachBottom() {
      // 触底刷新
      if (this.categoryId && !this.pullLoad.finished) {
        this.listOneProjectGoodsCategory()
      }
    },
    onPullDownRefresh() {
      if (this.categoryId === null) return
      this.listQuery.keyword = ''
      this.listData = []
      this.currentPage = 1
      this.pullLoad.finished = false
      this.listOneProjectGoodsCategory()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    methods: {
      menuClick(index) {
        this.categoryLayer = false
        this.activeIndex = index
        this.listData = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listOneProjectGoodsCategory()
      },
      tabClick(index) {
        this.categoryLayer = false
        this.activeIndex = index.mp.detail.index
        // this.activeIndex = index
        this.listData = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listOneProjectGoodsCategory()
      },
      pageTo(item) {
        this.pageLoad = false
        this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30&urlFrom=sellPage'})
      },
      upperGoods(goods) {
        const that = this
        updateUpperShelfFlag({
          memberId: that.getCustomerId,
          goodsId: goods.goodsId,
          upperShelfFlag: 1
        }).then((response) => {
          if (response.isError) return
          that.$utils.showToast({ title: '操作成功' })
          that.$pt.removeStorageSync('sellList')
          setTimeout(() => {
            that.currentPage = 1
            that.pullLoad.finished = false
            that.listData = []
            that.pagingSellGoods()
          }, 500)
        }).catch(() => {
        })
      },
      upperGoodsAll() {
        const that = this
        this.$pt.showModal({
          content: '确定要添加所有商品和分类吗？',
          success(res) {
            if (res.confirm) {
              saveUpperShelfProjectGoodsTotal({
                memberId: that.getCustomerId,
                categoryId: that.categoryId
              }).then((response) => {
                if (response.isError) return
                that.$utils.showToast({ title: '操作成功' })
                that.$pt.removeStorageSync('sellList')
                setTimeout(() => {
                  that.currentPage = 1
                  that.pullLoad.finished = false
                  that.listData = []
                  that.pagingSellGoods()
                }, 500)
              }).catch(() => {
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      listOneProjectGoodsCategory() {
        listOneProjectGoodsCategory().then((response) => {
          if (response.isError) return
          this.listCategory = response.data
          if (this.listCategory.length > 0) {
            this.categoryId = this.listCategory[this.activeIndex].categoryId
            this.pagingSellGoods()
          }
        }).catch(() => {
        })
      },
      pagingSellGoods() {
        this.listQuery.categoryId = this.categoryId
        this.listQuery.memberId = this.getCustomerId
        this.listQuery.currentPage = this.currentPage
        pagingSellGoods(this.listQuery).then((response) => {
          this.dataNone = false
          if (response.isError) return
          response.data.records.forEach(item => {
            if (item.distributeIncome) {
              item.distributeIncome = Number(item.distributeIncome)
            }
            this.listData.push(item)
          })
          this.currentPage++
          if (this.listQuery.currentPage === response.data.pages) {
            this.pullLoad.finished = true
          }
          if (response.data.records.length === 0) {
            this.dataNone = true
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  min-height: 100vh;
  background: white;
  .list-tabs{
    padding-right: 34px;
  }
  .fixed-top{
    position: fixed;
    padding-bottom: 2px;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 115;
  }
  .search-bar{
    padding: 10px 8px;
    .search{
      border-radius: 25px;
      height: 30px;
      color: #aeaeae;
      background-color: #f4f4f4;
    }
  }
  .menu-btn{
    position: absolute;
    right: 0px;
    top: 8px;
    background: #fff;
    padding-right: 6px;
    padding-left: 0px;
    padding-bottom: 6px;
    z-index: 50;
  }
  .category-layer{
    background: #fbfbfb;
    position: fixed;
    left: 0;
    top: 50px;
    width: 100%;
    height: 100%;
    z-index: 150;
    box-sizing: border-box;    
    .layer-t{
      background: #fff;
    }
    .menu-btn{
      position: relative;
      right: 0px;
      top: 0px;
      padding: 0px;
    }
    ul{
      margin-top: 10px;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      li{
        display: block;
        font-size: 17px;
        color: #595959;
        text-align: center;
        line-height: 39px;
        padding: 0;
        border-radius: 5px;
        float: left;
        width: 21%;
        height: 40px;
        margin: 0 2% 10px 2%;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
      }
    }
  }
  .upper-all-btn {
    width: 56px;
    height: 56px;
    position: fixed;
    bottom: 55px;
    right: 16px;
    z-index: 100;
    color: #292929;
    background: #ffc808;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
  }
  .main {
    .main-bar {
      position: relative;
      padding: 0 15px 20px;
      margin-top: 10px;
      .shop-bar {
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 10px 13px;
        box-shadow: 0 4px 10px #dddddd;
        margin-top: 10px;
        border-radius: 5px;
        &:first-child{
          margin-top: unset;
        }
        .img-item-box {
          width: 100px;
          height: 100px;
          .img-item {
            width: 100px;
            height: 100px;
          }
        }
        .content-item-box {
          width: 209px;
          height: 90px;
          padding: 5px 0;
          margin-left: 10px;
          .content-title {
            font-size: 14px;
            line-height: 18px;
            color: #333;
          }
          .content-foot {
            .self-buy {
              height: 15px;
              text-align: center;
              display: flex;
              justify-content: left;
              align-items: center;
              .self-buy-left {
                background: #ffe200;
                font-size: 10px;
                color: #333;
                padding: 0 4px;
              }
              .self-buy-right {
                background: #000000;
                font-size: 10px;
                color: #fff;
                padding: 0 4px;
              }
            }
            .price-row {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price-box {
                display: flex;
                justify-content: left;
                align-items: flex-end;
                .price {
                  font-size: 19px;
                  color: #ff0000;
                  line-height: 1;
                }
                .old-parice {
                  font-size: 12px;
                  color: #333;
                  text-decoration: line-through;
                  margin-left: 5px;
                  line-height: 1;
                }
              }
            }
          }
        }
      }
      .upper-btn{
        border: #292929 1px solid;
        border-radius: 4px;
        padding: 4px 16px;
        background: #fff;
        position: absolute;
        right: 10px;
        bottom: 19px;
        .iconfont{
          font-size: 10px;
          font-weight: bold;
        }
      }
    }
  }
  .nodata {
    margin-top: 115px;
    img{
      display: inline-block;
    }
  }
}
</style>
